<template>
    <div class="address-contain">
        <div class="header bg-grey">
            <div class="header-left">
                <div class="back" @click="handleBack">
                    <i class="i-left"></i>
                </div>
            </div>
            <div class="header-middle m-l-12"><span class="font-black">用户中心</span></div>
            <div class="header-right"></div>
        </div>
        <div class="content">
            <van-radio-group v-model="checkAddr" @change="handleRadioChange">
                <div class="address-list" v-if="addressDefault && addressDefault.id">
                    <van-radio :name="addressDefault.id" checked-color="#07c160" class="addr-radio">  
                        <img class="radio-icon" slot="icon" slot-scope="props" :src="props.checked ? icon.active : icon.normal">
                        <div class="radio-content">
                            <div class="radio-content__user">{{addressDefault.userName}}: <span class="phone">{{addressDefault.telNumber}}</span> <span class="addr-defaut" v-if="addressDefault.is_default">默认</span></div>
                            <div class="radio-content__detail">{{addressDefault.provinceName}}{{addressDefault.cityName}}{{addressDefault.countyName}}{{addressDefault.streetName}}{{addressDefault.detailInfo}}</div>
                        </div>
                        <router-link :to="'/address/edit/'+addressDefault.id">
                            <div class="addr-radio__edit">编辑</div>
                        </router-link>
                    </van-radio>
                </div>
                <div class="address-list" v-for="val in list">
                    <van-radio :name="val.id" checked-color="#07c160" class="addr-radio">
                        <img class="radio-icon" slot="icon" slot-scope="props" :src="props.checked ? icon.active : icon.normal">
                        <div class="radio-content">
                            <div class="radio-content__user">{{val.userName}}: <span class="phone">{{val.telNumber}}</span></div>
                            <div class="radio-content__detail">{{val.provinceName}}{{val.cityName}}{{val.countyName}}{{val.streetName}}{{addressDefault.detailInfo}}</div>
                        </div>
                        <router-link :to="'/address/edit/'+val.id">
                            <div class="addr-radio__edit">编辑</div>
                        </router-link>
                    </van-radio>
                </div>
            </van-radio-group>
            <router-link to="/address/add">
                <div class="address-add">
                    <img src="../../assets/images/add.png"/>
                    <div>添加地址</div>
                </div>
            </router-link>
        </div>

    </div>
</template>

<script>
import { autoLogin } from '@/utils'     
import { getAddressList } from '@/api/user'

export default {
    name: "addressList",
    data() {
        return {
            addressDefault: {},
            checkAddr: '',
            list: [],
            icon: {
                normal: require('../../assets/images/local-normal.png'),
                active: require('../../assets/images/local-active.png')
            },
        }
    },
    created(){
        autoLogin()
        this.$store.commit("SET_ADDRCHOOSEID",0)
        this.getAddress()
    },
    methods: {
        getAddress() {
            getAddressList().then(response => {
                if(response.data) {
                    this.list = response.data
                    if(response.defaultAddress && response.defaultAddress !==undefined) {
                        this.addressDefault = response.defaultAddress
                        this.checkAddr = response.defaultAddress.id
                    }
                }
            })
        },
        handleRadioChange(name){
            if(this.checkAddr !== name) {
                const isChoose = this.$store.state.common.isChoose
                if(isChoose===1){
                    this.$store.commit("SET_ADDRCHOOSEID",name)
                    this.$store.commit("SET_ISCHOOSE",0)
                    this.$router.go(-1);
                }
            }

        },
        handleBack(){
            const isChoose = this.$store.state.common.isChoose
            if(isChoose===1){
                this.$store.commit("SET_ADDRCHOOSEID",this.checkAddr)
                this.$store.commit("SET_ISCHOOSE",0)
            }
            this.$router.go(-1)
        }
    }
}
</script>
